<template>
	<div class="choicenessBox">
		<div class="choicenessTop">
			<span class="choicenessTitle">软件分类</span>
			<span class="choicenessTabs">
				<span v-for="item in classificationList" class="choicenessTabsName" @mouseenter="tabsClick(item.channelPath)" :class="item.channelPath == activeIndex ? 'tabsActive' : ''">
					{{ item.channelName }}
				</span>
			</span>
		</div>
		<div class="choicenessBtm">
				<a class="block_a software" :href="Path + item?.url" v-for="item in contentList">
				<img :src="getImgPath(item.headImag)" alt="" class="softwareLeft" />
				<div class="softwareRight">
					
						<p class="p1 flowHidden">{{ item.title }}</p>
						<p class="p3">{{ item.extend.enclosureUpload?.length ? item.extend.enclosureUpload[0].resourceSize : '未知' }}</p>
						<span class="p4" @click.stop.prevent="downLoadFile(item)">立即下载</span>
					
				</div>
				</a>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		classificationList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			activeIndex: 0,
			contentList: [],
			Path: getRootPath(),
			query: GetQueryString()
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.activeIndex = this.classificationList[0].channelPath;
			this.getContentOfChannel();
		});
	},
	methods: {
		tabsClick(val) {
			console.log(val, 'val');
			this.activeIndex = val;
			this.getContentOfChannel();
		},
		getContentOfChannel(id) {
			let param = {
				channelPaths: this.activeIndex,
				orderBy: 2,
				pageNum: 1,
				pageSize: 20,
				isTop: false,
				excludeTypeIdStr: '1401'
			};
			contentApi.fetchContentOfChannel(param, res => {
				if (res.code == '00000 00000') {
					this.contentList = [];
					this.contentList = res.data.records;
				} else {
				}
			});
		},
		getImgPath(url) {
			return imgPath(url);
		},
		downLoadFile(item) {
			let param = {
				contentId: item.id,
				resIds: item.extend.enclosureUpload[0]?.id
			};
			contentApi.downloadAnnexs(param, res => {
				downloadFile(res.data, item.title + '.zip');
			});
		}
	}
};
</script>

<style scoped="scoped">
.choicenessBox {
	margin-top: 60px;
	width: 1200px;
}
.choicenessBox .choicenessTop {
	display: flex;
}
.choicenessBox .choicenessTop .choicenessTitle {
	height: 30px;
	font-size: 30px;
	font-weight: 600;
	color: #333333;
	line-height: 30px;
}
.choicenessBox .choicenessTop .choicenessTabs {
	margin-left: 48px;
	display: flex;
	align-items: flex-end;
}
.choicenessBox .choicenessTop .choicenessTabs .choicenessTabsName {
	box-sizing: border-box;
	padding-bottom: 8px;
	margin-right: 32px;
	height: 22px;
	font-size: 14px;
	font-weight: 400;
	color: #666666;
	line-height: 14px;
	cursor: pointer;
}
.choicenessBox .choicenessTop .choicenessTabs .tabsActive {
	color: #333333;
	font-weight: 500;
	border-bottom: 2px solid #ff3333;
}
.choicenessBtm {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
}
.choicenessBtm .software {
	margin-left: 12px;
	box-sizing: border-box;
	width: 190px;
	height: 96px;
	padding: 12px 20px;
	background: #ffffff;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.choicenessBtm .software .softwareRight .p1 {
	cursor: pointer;
	width: 92px;
	height: 14px;
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	color: #333333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.choicenessBtm .software .softwareRight .p1:hover {
	color: #ff3333;
}
.choicenessBtm .software .softwareLeft {
	width: 48px;
	height: 48px;
}

.choicenessBtm .software .softwareRight {
	margin-top: 8px;
	margin-left: 12px;
	position: relative;
	height: 48px;
	flex: 1;
}
.choicenessBtm .software .softwareRight .p3 {
	margin-top: 12px;
	height: 12px;
	font-size: 12px;
	line-height: 12px;
	font-weight: 400;
	color: #333333;
}

.choicenessBtm .software .softwareRight .p4 {
	display: none;
	cursor: pointer;
	position: absolute;
	margin-top: 10px;
	padding: 6px 8px;
	height: 12px;
	font-size: 12px;
	font-weight: 500;
	color: #ffffff;
	line-height: 12px;
	background: #3ace72;
	border-radius: 4px;
}
.choicenessBtm .software .softwareRight .p4:hover {
	background: #60db8b;
}

.choicenessBtm .software .softwareRight .p4:active {
	background: #27a85d;
}
.choicenessBtm .software:hover {
	background: #f8f8f8;
}
.choicenessBtm .software:hover .p3 {
	display: none;
}

.choicenessBtm .software:hover .p4 {
	display: block;
}
.software:nth-child(6n + 1) {
	margin-left: 0;
}
</style>
